<template>
    <div>
      <sticky-top>
        <div class="title">
          <span>查看收送花礼</span>
          <span class="back" @click="back"> <i class="iconfont icon-fanhui"></i> 返回 </span>
          <el-divider></el-divider>
        </div>
      </sticky-top>
      <div class="container">
        <div class="wrap">
          <el-row>
            <el-col :lg="16" :md="20" :sm="24" :xs="24">
              <el-form :model="form" status-icon ref="form" label-width="120px" @submit.native.prevent>
                <el-form-item label="花型" prop="flower_title">
                  <el-input size="medium" v-model="form.flower_title" placeholder="" readonly></el-input>
              </el-form-item>
              <el-form-item label="送礼人手机号" prop="send_mobile">
                <el-input size="medium" v-model="form.send_mobile" placeholder="" readonly></el-input>
              </el-form-item>
              <el-form-item label="收礼人姓名" prop="username">
                <el-input size="medium" v-model="form.username" placeholder="" readonly></el-input>
              </el-form-item>
              <el-form-item label="收礼人手机号" prop="mobile">
              <el-input size="medium" v-model="form.mobile" placeholder="" readonly></el-input>
              </el-form-item>
              <el-form-item label="纪念方式" prop="send_type">
                  <el-input size="medium" v-model="form.send_type" placeholder="" readonly></el-input>
              </el-form-item>
              <el-form-item label="计划日期" prop="planned_date">
                <el-input size="medium" v-model="form.planned_date" placeholder="" readonly></el-input>
              </el-form-item>
                <el-form-item label="描述" prop="description">
                  <el-input size="medium" v-model="form.description" type="textarea" :rows="4" placeholder="" readonly>
                  </el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                  <el-input size="medium" v-model="form.status" placeholder="" readonly></el-input>
                </el-form-item>
                <el-form-item label="纪念形式" prop="collect_type">
                  <el-input size="medium" v-model="form.collect" placeholder="" readonly></el-input>
                </el-form-item>
                <div v-if="form.collect_type == 1">
                  <el-form-item label="图片" prop="img">
                  <upload-imgs :max-num="maxNum" ref="uploadEle" :value="initData" :disabled="disabled" />
                </el-form-item>
                </div>
                <div v-if="form.collect_type == 2">
                  <el-form-item label="视频" prop="file">
                    <video id="video" controls autoplay :src="form.file"></video>
                  </el-form-item>
                </div>
                <div v-if="form.collect_type == 3">
                  <el-form-item label="语音" prop="img">
                    <audio controls="controls" preload="auto" :src="form.file"></audio>
                  </el-form-item>
                    
                  </el-form-item>
                </div>
                
                <!-- <el-form-item class="submit">
                  <el-button
                    v-permission="{ permission: '', type: 'disabled' }"
                    type="primary"
                    @click="submitForm('form')"
                    >保 存</el-button
                  >
                  <el-button @click="resetForm('form')">重 置</el-button>
                </el-form-item> -->
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import SendCollectModel from '@/model/send-collect'
  import UploadImgs from '@/component/base/upload-image'
  
  export default {
    components: {
      UploadImgs,
    },
    props: {
      isCreate: {
        type: Boolean,
        default: false,
      },
      sendCollectId: {
        type: Number,
        default: null,
      },
    },
    data() {
      return {
        maxNum: 9,
        form: {
          flower_id: '',
          flower_title: '',
          send_user_id: '',
          send_mobile: '',
          username: '',
          mobile: '',
          send_type: 0,
          planned_date: '',
          status: 0,
          description: '',
          collect_type: 0,
          collect: '',
          file: '',
        },
        rules: {
          minWidth: 10,
          minHeight: 10,
          maxSize: 5,
        },
        initData: [],
        disabled: true,  
      }
    },
    async mounted() {
      if (!this.isCreate) {
        const res = await SendCollectModel.get(this.sendCollectId)
        this.initData = res.images
        ? res.images.map((it, index) => ({ id: index, display: it }))
        : []
        // this.initData = res.images
      
        this.form = res
        this.form.send_type = this.onSendType(res.send_type)
        this.form.collect = this.onCollectType(res.collect_type)
        this.form.status = res.status == 1 ? "已查看" : "未查看"
      }
     
    },
    methods: {
      async getValue() {
        const val = await this.$refs.uploadEle.getValue()
        if (val && val.length > 0) {
          this.form.image = val[0].display
        }
      },
      async submitForm() {
        await this.getValue()
        const form = { ...this.form }
        console.log(form)
        const res = await FlowerModel.update(this.sendCollectId, form)
        if (res.code < window.MAX_SUCCESS_CODE) {
          this.$message.success(`${res.message}`)
          this.resetForm('form')
          this.$emit('editClose')
        }
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      back() {
        this.$emit('editClose')
      },
      onSendType(val) {
        const sendType = {
          1: "留言",
          2: "计划"
        }
        return sendType[val]
      },
      onCollectType(val) {
        const collectType = {
          1: "照片",
          2: "视频",
          3: "语音"
        }
        return collectType[val]
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .el-divider--horizontal {
    margin: 0;
  }
  
  .container {
    .title {
      height: 59px;
      line-height: 59px;
      color: $parent-title-color;
      font-size: 16px;
      font-weight: 500;
      text-indent: 40px;
  
      .back {
        float: right;
        margin-right: 40px;
        cursor: pointer;
      }
    }
  
    .wrap {
      padding: 20px;
    }
  
    .submit {
      float: left;
    }
  }
  </style>
  